<template>
  <div>
    <div class="main">
      <el-form :model="params" ref="params" label-width="130px" size="small">
        <el-row type="flex" class="map-set">基本信息</el-row>
        <div class="item">
          <el-row>
            <el-col :span="12">
              <el-form-item label="区域名称" prop="name" :rules="[{ required: true, message: '区域名称未填',trigger: 'blur'}]">
                <el-input v-model="params.name" style="width: 217px;" clearable
                          :disabled='($route.query.id ? true : false && params.name? true: false)'/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属上级" prop="agentid" :rules="[{required: true, message: '请选择所属于上级', trigger: 'change'}]">
                <el-select v-model="params.agentid" filterable default-first-option placeholder="默认公司代理">
                  <el-option v-for="item in areaAgents" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="外卖抽佣比例" prop="coefficient" :rules="[{required: true, message: '外卖佣金比例未填'}]">
                <el-row type="flex">
                  <el-input-number style="margin-right: 5px" v-model="params.coefficient" :min='0' :max='100' :precision='1' />
                  <span style='line-height: 32px;'>%</span>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="跑腿抽佣比例" prop="paotuiCoefficient" :rules="[{required: true, message: '跑腿佣金比例未填'},]">
                <el-row type="flex">
                  <el-input-number style="margin-right: 5px" v-model="params.paotuiCoefficient" :min='0' :max='100' :precision='1' />
                  <span style='line-height: 32px;'>%</span>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="12" >
              <el-form-item label="服务城市" prop="province" :rules="[{ required: true, message: '服务城市未填写', trigger: 'change'}]">
                <el-input v-model="params.province"  clearable placeholder="请输入服务城市" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="办公地址" prop="officeAddress" :rules="[{ required: true, message: '办公地址未填', trigger: 'blur'}]">
                <el-input v-model="params.officeAddress" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row type="flex" class="map-set">公司信息</el-row>
        <div class="item">
          <el-row>
            <el-col :span="12">
              <el-form-item label="法人姓名" prop="legalName" :rules="[{required: true, message: '法人姓名未填', trigger: 'blur'}]">
                <el-input v-model="params.legalName" style="width: 217px" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="区域账号" prop="accounts" :rules="[{required: true, message: '账号未填',trigger:'blur'}]">
                <el-input v-model="params.accounts" style="width: 217px" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法人手机号" prop="legalMobile" :rules="[{required: true, message: '管理员手机号未填', trigger: 'blur'}]">
                <el-input v-model="params.legalMobile" style="width: 217px" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法人身份证号" prop="legalIdnumber" :rules="[{required: true, message: '法人身份证号未填',trigger:'blur'}]">
                <el-input v-model="params.legalIdnumber" style="width: 217px" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="公司注册名">
                <el-input v-model="params.companyName" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="法人身份证" style="margin-bottom: 0">
            <span class="prompt-msg">请上传法人身份证正反和反面</span>
            <el-row type="flex">
              <el-form-item>
                <pt-upload class="update" :size="2" :upLoadImg="params.legalIdPositiveLoad" @getUpLoad="getUpLoad1" />
              </el-form-item>
              <el-form-item>
                <pt-upload class="update" :size="2" :upLoadImg="params.legalIdNegativeLoad" @getUpLoad="getUpLoad2" />
              </el-form-item>
            </el-row>
          </el-form-item>
          <el-form-item label="营业执照" style="margin-bottom: 0">
            <span class="prompt-msg">请上传营业执照(三证合一)</span>
            <el-form-item>
              <pt-upload class="update" :size="2" :upLoadImg="params.unifiedSocialCreditCodeLoad" @getUpLoad="getUpLoad3" />
            </el-form-item>
          </el-form-item>
        </div>
        <el-row type="flex" style="padding: 10px 15px;font-weight: bold; background:#eff0f5;">管理员信息</el-row>
        <div class="item">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input v-model="params.adminName" style="width:217px" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号">
                <el-input v-model="params.adminMobile" style="width:217px" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号">
                <el-input v-model="params.adminIdnumber" style="width: 217px" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="管理员身份证" style="margin-bottom: 0">
            <span class="prompt-msg">请上传管理员身份证正反和反面</span>
            <el-row type="flex">
              <el-form-item>
                <pt-upload class="update" :size="2" :upLoadImg="params.adminIdPositiveLoad" @getUpLoad="getUpLoad4" />
              </el-form-item>
              <el-form-item>
                <pt-upload class="update" :size="2" :upLoadImg="params.adminIdNegativeLoad" @getUpLoad="getUpLoad5" />
              </el-form-item>
            </el-row>
          </el-form-item>
        </div>
        <el-row type="flex" style="padding: 10px 15px;font-weight: bold; background:#eff0f5;">财务信息</el-row>
        <div class="item">
          <el-row>
            <el-col :span="12">
              <el-form-item label="对公账户名">
                <el-input v-model="params.publicAccountsName" style="width: 217px" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行账号">
                <el-input v-model="params.bankAccount" style="width: 217px" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户行">
                <el-select v-model="params.accountBank">
                  <el-option label="中国工商银行" value="1"></el-option>
                  <el-option label="中国建设银行" value="2"></el-option>
                  <el-option label="招商银行" value="3"></el-option>
                  <el-option label="中国农业银行" value="4"></el-option>
                  <el-option label="交通银行" value="5"></el-option>
                  <el-option label="中国银行" value="6"></el-option>
                  <el-option label="广发银行" value="7"></el-option>
                  <el-option label="华夏银行" value="8"></el-option>
                  <el-option label="兴业银行" value="9"></el-option>
                  <el-option label="光大银行" value="10"></el-option>
                  <el-option label="浦东发展银行" value="11"></el-option>
                  <el-option label="邮储储蓄" value="12"></el-option>
                  <el-option label="北部湾银行" value="13"></el-option>
                  <el-option label="桂林银行" value="14"></el-option>
                  <el-option label="农村合作信用社" value="15"></el-option>
                  <el-option label="柳州银行" value="16"></el-option>
                  <el-option label="徽商银行" value="17"></el-option>
                  <el-option label="民生银行" value="18"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户所在省市">
                <el-input v-model="params.accountBankProvinceCity" style="width: 217px" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支行名称">
                <el-input v-model="params.branchName" style="width: 217px" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户行联行号">
                <el-input v-model="params.accountBankLinkBankNo" style="width: 217px;" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="应缴保证金">
                <el-input-number style="margin-right: 5px" v-model="params.payableDeposit" :min='0' :max='999999' :precision='2' /> 元
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="已缴保证金">
                <el-input-number style="margin-right: 5px" v-model="params.depositPaid" :min='0' :max='999999' :precision='2' /> 元
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row type="flex" class="map-set">合同信息</el-row>
        <div class="item">
          <el-form-item label="合同开始日期" prop="contractStartTime" :rules="[{ required: true, message: '请选择合同开始时间', trigger: 'blur' }]">
            <el-date-picker v-model="params.contractStartTime" type="date"
                            value-format="yyyy-MM-dd"  format="yyyy-MM-dd" placeholder="开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="合同结束日期" prop="contractEndTime" :rules="[{ required: true, message: '请选择合同开始时间', trigger: 'blur' }]">
            <el-date-picker v-model="params.contractEndTime" type="date" :rules="[{ required: true, message: '请选择合同结束', trigger: 'blur' }]"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="截至时间" :pickerOptions="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </div>
        <el-row class="map-set" v-if="showMap" type="flex" align="middle">代理区域</el-row>
        <div class="item" v-if="showMap">
          <el-form-item label-width="0" prop="distrange" :rules="[ { required: true, message: '配送区域未选',trigger:'change' } ]">
            <gaode-map :deliveryArea ="deliveryArea" :search="searchName" @surDistrange="surDistrange" class="base-diy-map" />
          </el-form-item>
        </div>
        <el-form-item style="margin-top: 50px;">
          <el-button type="primary" :loading="issubmitLoading" @click="submitForm('params')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import gaodeMap from './components/gaodeMap'
  import googleMap from './components/googleMap'
  export default {
    inject: ['loadAll'],
    components: { gaodeMap, googleMap },
    data() {
      return {
        pickerOptions:{
          disabledDate(time) {
            return time.getTime() <= (Date.now() - 3600 * 1000 * 24 )
          },
        },
        areaAgents: [],                           //代理商表
        issubmitLoading: false,                   //保存按钮
        dialogTableVisible: false,
        params: {
          name: '',                               //代理商称
          pid: '',                                //省id
          cid: '',                                //市id
          tid: '',                                //县id
          province: '',                           //省名称
          cityname: '',                           //市名称
          countyname: '',                         //县名称
          officeAddress: '',					            //办公地址
          agentid: null,						              //所属代理商
          coefficient: '',					              //外卖佣金比例
          paotuiCoefficient: '',					        //跑腿佣金比例
          companyName: '',					              //公司名称
          legalName: '',					                //法人姓名
          legalMobile: '',					              //法人手机号
          accounts: '',					                  //代理商号
          legalIdnumber: '',					            //法人身份证号
          legalIdPositiveLoad: '',				        //法人身份证正面
          legalIdNegativeLoad: '',				        //上传法人身份证反面
          unifiedSocialCreditCodeLoad: '',		    //统一社会信用代码
          adminName: '',					                //管理员姓名
          adminMobile: '',					              //管理员手机号
          adminIdnumber: '',					            //管理员身份证号
          adminIdPositiveLoad: '',				        //管理员身份证正面
          adminIdNegativeLoad: '',				        //管理员身份证反面
          publicAccountsName: '',				          //对公账号
          bankAccount: '',					              //银行账号
          accountBank: '',					              //开户行
          accountBankProvinceCity: '',			      //开户所在省市
          branchName: '',					                //支行名称
          accountBankLinkBankNo: '',		          //开户行联行号
          payableDeposit: '',					            //应缴宝保证金
          depositPaid: '',					              //已缴宝保证金
          // startTimeToendTime: '',                 //合同日期
          contractStartTime: '',			          //合同生效日期
          contractEndTime: '',				          //合同到期日期
          distrange: '',                          //经纬度代理商
        },
        showMap: true,
        searchName: '', // 默认设置代理商区域
        deliveryArea: '' // 代理商区域
      }
    },
    watch: {
      'params.agentid': {
        handler(val) {
          this.showMap = val == -1 ? false : true
          if (val != -1 && this.areaAgents.length) {
            const index = this.areaAgents.findIndex(i => i.id == val)
            const a = this.areaAgents[index]
            const address = (a.province || '') + (a.cityname || '') + (a.countyname  || '')
            this.searchName = address
          }
        },
        deep: true
      }
    },
    methods: {
      surDistrange(val) { // 确认区域
        this.params.distrange = val
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.params }
            params.agentid = params.agentid < 0 ? '' : params.agentid
            params.startTimeToendTime = [`${params.contractStartTime} 00:00:00`, `${params.contractEndTime} 23:59:59`]
            delete params.contractStartTime
            delete params.contractEndTime
            this.issubmitLoading = true
            if (params.agentid == '') params.distrange = ''
            if (this.$route.query.id) {
              params.id = this.$route.query.id
              this.$http.post('/server/agent/update', JSON.stringify(params)).then(res => {
                if (res.data.success) {
                  this.$message({type: 'success', message: '提交成功'})
                  this.$router.push({path: '/main/company/list'})
                }
              }).finally(() => { this.issubmitLoading = false })
            } else {
              this.$http.post('/server/agent/save', JSON.stringify(params)).then(res => {
                if (res.data.success) {
                  this.$message({type: 'success', message: '提交成功'})
                  this.loadAll(() => {
                    this.$router.push({path: '/main/company/list'})
                  })
                }
              }).finally(() => { this.issubmitLoading = false })
            }
          } else {
            this.$alert('输入内容校验未通过！')
            return false
          }
        })
      },
      getUpLoad1(img) { // 身份证正面
        this.params.legalIdPositiveLoad = img
      },
      getUpLoad2(img) { // 身份证反面
        this.params.legalIdNegativeLoad = img
      },
      getUpLoad3(img) { // 三证合一
        this.params.unifiedSocialCreditCodeLoad = img
      },
      getUpLoad4(img) { // 管理员身份证正面
        this.params.adminIdPositiveLoad = img
      },
      getUpLoad5(img) { // 管理员身份证反面
        this.params.adminIdNegativeLoad = img
      },
      areaList() { // 代理商代理商表
        this.$http.get('/server/areaAgent/selectAreaAgents', {headers: {isCancel: true}}).then((res) => {
          if (res.data.success) {
            const arrs = res.data.data.areaAgents || []
            arrs.push({id: -1, name: '公司管理'})
            this.areaAgents = arrs
          }
        })
      },
      getDateInfo() {  //获取数据
        const params = {id: this.$route.query.id}
        this.$http.get('/server/agent/info?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            const r = res.data.data
            this.params.name = r.name
            this.params.province = r.province  + r.cityname + r.countyname
            this.params.officeAddress = r.officeAddress || ''
            this.params.agentid = r.agentid ? r.agentid : -1
            this.params.coefficient = r.coefficient || ''
            this.params.paotuiCoefficient = r.paotuiCoefficient || ''
            this.params.companyName = r.companyName || ''
            this.params.legalName = r.legalName || ''
            this.params.legalMobile = r.legalMobile || ''
            this.params.accounts = r.accounts || ''
            this.params.legalIdnumber = r.legalIdnumber || ''
            this.params.legalIdPositiveLoad = r.legalIdPositiveLoad || ''
            this.params.legalIdNegativeLoad = r.legalIdNegativeLoad || ''
            this.params.unifiedSocialCreditCodeLoad = r.unifiedSocialCreditCodeLoad || ''
            this.params.adminName = r.adminName || ''
            this.params.adminMobile = r.adminMobile || ''
            this.params.adminIdnumber = r.adminIdnumber || ''
            this.params.adminIdPositiveLoad = r.adminIdPositiveLoad || ''
            this.params.adminIdNegativeLoad = r.adminIdNegativeLoad || ''
            this.params.publicAccountsName = r.publicAccountsName || ''
            this.params.bankAccount = r.bankAccount || ''
            this.params.accountBank = r.accountBank || ''
            this.params.accountBankProvinceCity = r.accountBankProvinceCity || ''
            this.params.branchName = r.branchName || ''
            this.params.accountBankLinkBankNo = r.accountBankLinkBankNo || ''
            this.params.payableDeposit = r.payableDeposit ||''
            this.params.depositPaid = r.depositPaid || ''
            this.params.distrange = r.distrange || ''
            this.params.contractStartTime = r.startTimeToendTime.length ? `${r.startTimeToendTime[0].slice(0, 11)}` : ''
            this.params.contractEndTime = r.startTimeToendTime.length ? `${r.startTimeToendTime[1].slice(0, 11)}` : ''
            this.params.distrange = r.distrange || ''
            this.params.startTimeToendTime = r.startTimeToendTime && r.startTimeToendTime.length > 0 ? r.startTimeToendTime : ''
            if (r.distrange) this.deliveryArea = r.distrange
          }
        })
      }
    },
    mounted() {
      this.areaList()
      if (this.$route.query.id) {
        this.getDateInfo()
      }
    }
  }
</script>
<style scoped>
   .main {
    max-width: 1200px;
    margin: 0 auto;
  }
  .item {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #e5e5e5;
    border-top: none;
  }
  .update{
    margin-right: 50px;
  }
  .map-set {
    padding: 10px 15px;
    font-weight: bold;
    background: #eff0f5;
  }
   .base-diy-map {
     width: 100%;
     height: 600px;
   }
  .map-set .title {
    display: inline-block;
    width: 85px;
    padding-right: 10px;
    text-align: right;
  }
  .prompt-msg{
    color: #999;
  }
</style>
